<template>
	<view class="wn-calendar">
		<view class="content">
			<view class="content_left"
				:class="{'Lineborder_Spring':style.type == 1, 'Lineborder_Summer':style.type == 2,'Lineborder_Autumn':style.type == 3,'Lineborder_Winter':style.type == 4}">
			</view>
			<view class=""
				:class="{'calendar-Head_Spring':style.type == 1, 'calendar-Head_Summer':style.type == 2,'calendar-Head_Autumn':style.type == 3,'calendar-Head':style.type == 4}">
				<view class="calendar-title">{{headText.year}}</view>
				<view class="head">
					<image @click="onChange('prev')"
						src=""
						class="arrow left" mode="aspectFit"></image>
					<!--          <text class="t">{{ headText }}</text>-->
					<view class="head_Show_time">
						<view>{{headText.monthEN}}</view>
						<view>{{headText.month}}</view>
					</view>
					<image @click="onChange('next')"
						src=""
						class="arrow" mode="aspectFit"></image>
				</view>
			</view>
			<view class="content_right"
				:class="{'Lineborder_Spring':style.type == 1, 'Lineborder_Summer':style.type == 2,'Lineborder_Autumn':style.type == 3,'Lineborder_Winter':style.type == 4}">
			</view>
		</view>

		<view class="calendar-border"
			:class="{'Lineborder_border_Spring':style.type == 1, 'Lineborder_border_Summer':style.type == 2,'Lineborder_border_Autumn':style.type == 3,'Lineborder_border_Winter':style.type == 4}">
			<view class="labels"
				:class="{'Lineborder_Spring':style.type == 1, 'Lineborder_Summer':style.type == 2,'Lineborder_Autumn':style.type == 3,'Lineborder_Winter':style.type == 4}">
				<!-- 'Lineborder_left_Spring':style.type == 1, 'Lineborder_left_Summer':style.type == 2,'Lineborder_left_Autumn':style.type == 3,'Lineborder_left_Winter':style.type == 4, -->
				<view class="label-item" v-for="label,index in labels" :key="label"
					:class="{'Lineborder_left_Spring':style.type == 1, 'Lineborder_left_Summer':style.type == 2,'Lineborder_left_Autumn':style.type == 3,'Lineborder_left_Winter':style.type == 4,'Saturday':index == 0 , 'Weekend':index == 6}">
					<text class="t">{{ label }}</text>
				</view>
			</view>

			<view :class="['row', isBorder ? 'border' : '']" v-for="row in rows">
				<view @click="onChoose(item)"
					:class="['day-item', item.show ? 'show' : '', active === item.date ? 'active' : '',item.data?.type == 1 ? 'tageYellow':item.data?.type == 2 ? 'tageGreen':item.data?.type == 3 ? 'tageRed':'']"
					v-for="(item, ind) in days.slice(row * 7, (row + 1) * 7)" :key="item.date">
					<text class="t">{{ item.label }}</text>
					<!-- {{item}} -->
					<!-- 1黄  2绿  3红 -->
					<!--    <text
            v-if="item.data && item.data.text"
            class="data"
            :style="`color: ${colors[item.data.type] || '#f3a73f'};`"
            >{{ item.data.text }}</text
          > -->
				</view>
			</view>
			<view class="Arrowhead-box" @click="arrowhead">
				<image :style="{ transform: 'rotate(' + Arrowhead + 'deg)' }" class="Arrowhead"
					src=""
					mode=""></image>
			</view>
			<view class="endContent">
				<slot></slot>
			</view>

		</view>
	</view>
</template>

<script>
	import calendar from './calendar'
	export default {
		name: 'w-calendar',
		emits: ['choose', 'change'],
		props: {
			data: {
				type: Array,
				default () {
					return [
						// {
						// 	date: `2023/12/29`,
						// 	// text: '迟到',
						// 	type: 3
						// },
						// {
						// 	date: `2023/12/24`,
						// 	text: '老板请客',
						// 	type: 2
						// },
						// {
						// 	date: `2023/12/7`,
						// 	text: '通勤',
						// 	type: 3
						// },
						// {
						// 	date: `2023/12/8`,
						// 	text: '嘿嘿摸鱼',
						// 	type: 1
						// },
						// {
						// 	date: `2023/12/2`,
						// 	text: '开心',
						// 	type: 2
						// },
						// {
						// 	date: `2023/12/6`,
						// 	text: '工作出色',
						// 	type: 1
						// },
					]
				}
			},
			// colors: {
			// 	type: Array,
			// 	default () {
			// 		return ['#2979ff', '#18bc37', '#f3a73f', '#e43d33', '#8f939c']
			// 	}
			// },
			format: {
				type: String,
				default: ''
			},
			isLess: {
				// 是否补全其他日期
				type: Boolean,
				default: true
			},
			isBorder: {
				type: Boolean,
				default: true
			},
			isEn: {
				type: Boolean,
				default: false
			},
			style: {
				type: Object,
				default: {}
			}
		},
		computed: {
			headText() {
				if (this.format === '/') {
					return `${this.year}/${this.month}`
				} else {
					if (this.isEn) {
						// return `${calendar.getEn(this.month)}, ${this.year}`
						return {
							year: this.year,
							month: calendar.getEn(this.month),
							monthEN: calendar.Month_en[this.month - 1]
						}
					} else {
						// return `${this.year}年${this.month}月`
						return {
							year: this.year,
							month: this.month,
							monthEN: calendar.Month_en[this.month - 1]
						}
					}
				}
			}
		},
		data() {
			return {
				labels: this.isEn ? calendar.labels_en : calendar.labels_zh,
				active: '',
				rows: [0, 1, 2, 3, 4, 5, 6],
				days: [],
				year: '',
				month: '',
				Arrowhead: 0
			}
		},
		created() {
			this.refresh()
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					// console.log('oldVal:',oldVal)
					// console.log('newVal:',newVal)
					let DataTime = newVal || oldVal
					if (Array.isArray(DataTime) && DataTime.length > 10) {
						const {
							date
						} = DataTime[new Date().getDate() - 1]
						// this.active = date
					}
					this.refresh()
				},
				// immediate: true,
				deep: true
			}
		},
		methods: {
			refresh() {
				this.$nextTick(() => {
					const {
						days,
						year,
						month
					} = calendar.getDays(
						this.year,
						this.month,
						this.data,
						this.isLess
					)
					// console.log(days, year, month)

					this.days = days
					this.year = year
					this.month = month + 1
					this.$emit('getTime', this.days, this.year, this.month,this.active)
				})
			},
			onChange(type) {
				this.month = type === 'prev' ? this.month - 1 : this.month + 1
				this.refresh()
				this.$nextTick(() => {
					this.$emit('change', {
						year: this.year,
						month: this.month
					})
				})
			},
			onChoose(item) {
				if (!item.show) return
				this.active = item.date
				this.$nextTick(() => {
					this.$emit('choose', {
						date: item.date,
						data: this.data.find(item => item.date === item.date)
					})
				})
			},
			arrowhead() {
				this.Arrowhead = this.Arrowhead + 180
			}
		}
	}
</script>

<style scoped>
	.Saturday {
		background: #D0DEFB !important;
		border-radius: 30rpx 0 0rpx 0;
	}

	.Weekend {
		background: #D0DEFB !important;
		border-radius: 0 30rpx 0 0;
	}

	.calendar-border {
		background: white;
		border: 4rpx solid #7faacf;
		border-radius: 30rpx;
		width: 90%;
		margin: auto;
		margin-top: 60rpx;

	}

	.arrow {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		padding: 4px;
		width: 22px;
		height: 22px;
		background: #f7f7f7;
		border-radius: 22px;
	}

	.arrow.left {
		transform: rotate(180deg);
	}

	.Arrowhead-box {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	.Arrowhead {
		width: 44rpx;
		height: 22rpx;
	}

	.wn-calendar {
		min-width: 294px;
		//position: relative;
		//top: -192rpx;
		z-index: 2;
	}

	.head {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		//padding: 8px 0px;
	}

	.head_Show_time {
		display: flex;
		justify-content: space-between;
		width: 80%;
		font-size: 40rpx;
		font-weight: 800;
		color: #7C2D10;
	}

	.head .t {
		padding: 0 42px;
		font-size: 16px;
		line-height: 32px;
		color: #3a3a3a;
	}

	.labels {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		/* #endif */
		flex-direction: row;
		height: 36px;
		align-items: center;
		/* background: #f7f7f7; */
		/* 		border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0; */
		border-radius: 30rpx 30rpx 0 0;
		border-bottom: 4rpx solid #7faacf;
		background: #eaf8ff;
	}

	.label-item {
		min-width: 42px;
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		align-items: center;
		justify-content: center;
		/* #endif */
		height: 100%;
	}

	.label-item:not(:first-child) {
		border-left: 4rpx solid #7faacf;
	}

	.label-item .t {
		font-size: 14px;
		text-align: center;
		line-height: 14px;
		color: #3a3a3a;
	}

	.row {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		/* #endif */
		flex-direction: row;
		border-bottom: 1px solid transparent;
	}

	/* .row.border {
  border-bottom: 1px solid #f0f0f0;
} */

	.day-item {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* #endif */
		flex: 1;
		justify-content: center;
		padding: 7px 0px;
		border-radius: 4px;
		min-width: 42px;
		color: #7C2D10 !important;
	}

	.day-item.show {}

	.day-item.active {
		background-color: #ededed !important;
	}

	.day-item.active .t {
		font-weight: bold !important;
	}

	.day-item .t {
		font-size: 15px;
		line-height: 15px;
		text-align: center;
		color: #909399;
	}

	.day-item.show .t {
		color: #7C2D10;
		padding-top: 10rpx;
	}

	.day-item .data {
		margin-top: 2px;
		font-size: 11px;
		line-height: 11px;
		text-align: center;
		/* #ifdef APP-NVUE */
		text-overflow: clip;
		word-wrap: anywhere;
		/* #endif */
		color: #3a3a3a;
	}

	.content {
		display: flex;
		flex-direction: row;
	}

	.content_left {
		width: 10%;
		border-bottom: 4rpx solid #7faacf;
	}

	.content_right {
		width: 50%;
		border-bottom: 4rpx solid #7faacf;
	}

	.calendar-title {
		font-size: 28rpx;
		padding-left: 44rpx;
		line-height: 54rpx;
		font-weight: 600;
		color: #7C2D10;
	}

	/* 春 */
	.calendar-Head_Spring {
		width: 42%;
		height: 100%;
		border-top: 4rpx solid #E68089;
		border-left: 4rpx solid #E68089;
		border-right: 4rpx solid #E68089;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 2;
		background-color: #FCF3F7;
	}

	/* 夏 */
	.calendar-Head_Summer {
		width: 42%;
		height: 100%;
		border-top: 4rpx solid #7E873E;
		border-left: 4rpx solid #7E873E;
		border-right: 4rpx solid #7E873E;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 2;
		background-color: #F0F5DE;
	}

	/* 秋 */
	.calendar-Head_Autumn {
		width: 42%;
		height: 100%;
		border-top: 4rpx solid #B66F26;
		border-left: 4rpx solid #B66F26;
		border-right: 4rpx solid #B66F26;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 2;
		background-color: #F9EEDC;
	}

	/* 冬 */
	.calendar-Head {
		width: 42%;
		height: 100%;
		border-top: 4rpx solid #7faacf;
		border-left: 4rpx solid #7faacf;
		border-right: 4rpx solid #7faacf;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 2;
		background-color: #F6FCFF;
	}

	.endContent {
		width: 90%;
		margin: auto;
		border-top: 2rpx dashed #DCC1B7;
		padding-top: 60rpx;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.tageRed {

		width: 55rpx;
		height: 55rpx;
		background-image: url('../../static/image/red.png');
		background-position: right top;
		background-size: 52rpx 56rpx;
		background-repeat: no-repeat;
		/* 确保图像只显示一次 */
		background-position: center;
		/* 居中对齐图像 */
		padding-top: 24rpx;
	}

	.tageGreen {

		background-image: url('../../static/image/Green.png');
		background-size: 52rpx 56rpx;
		background-repeat: no-repeat;
		background-position: center;
		width: 52rpx;
		height: 52rpx;
		padding-top: 24rpx;
	}

	.tageYellow {
		background-image: url('../../static/image/Yellow.png');
		background-size: 52rpx 56rpx;
		background-repeat: no-repeat;
		background-position: center;
		width: 52rpx;
		height: 52rpx;
		padding-top: 24rpx;
	}


	/* 边框 left 排除第一个 */
	/* 春 */
	/* 	.Lineborder_left_Spring {
		border-left: 4rpx solid #E68089 !important;
	} */

	.Lineborder_left_Spring:not(:first-child) {
		border-left: 4rpx solid #E68089 !important;
		background-color: #FFEAF3;
	}

	/* 夏 */
	/* 	.Lineborder_left_Summer {
		border-left: 4rpx solid #7E873E !important;
	} */

	.Lineborder_left_Summer:not(:first-child) {
		border-left: 4rpx solid #7E873E !important;
		background-color: #E9F2CB;
	}

	/* 秋 */
	/* 	.Lineborder_left_Autumn {
		border-left: 4rpx solid #B66F26 !important;
	} */

	.Lineborder_left_Autumn:not(:first-child) {
		border-left: 4rpx solid #B66F26 !important;
		background-color: #FBE7C5;
	}

	/* 冬 */
	/* 	.Lineborder_left_Winter {
		border-left: 4rpx solid #7FAACF !important;
	} */

	.Lineborder_left_Winter:not(:first-child) {
		border-left: 4rpx solid #7FAACF !important;
		background-color: #EAF8FF;
	}
</style>